<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en" data-rank="1">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>${project.name }-VChello Saas</title>
		<link href="/resources/src/css/main.css" rel="stylesheet">
   		<link href="/resources/src/css/responsive.css" rel="stylesheet">
		<link href="/resources/src/css/projects-detail.css" rel="stylesheet">
		<link href="/resources/src/css/projects.css" rel="stylesheet">
		<link href="/resources/src/umeditor/themes/default/css/umeditor.min.css" rel="stylesheet">
	</head>
	<body class="sticky-header left-side-collapsed">
		<div class="main-content">
        	<div class="row scroll-range" style="margin-right:0; margin-left:0;">
               	<div class="right-box text-center">
               		<!--头部（包含标题和logo等内容）和导航-->
               		<jsp:include page="../../common/admin-projects-common.jsp" />
               		
               		<!--标题创建笔记-->
               		<input type="hidden" value="${proType}" id="proType" />
               		<input type="hidden" value="${authorization}" id="authorization" />
               		<div class="content-title create-note">
               			<i class="iconfont icon-tianjia1 create-btn"></i><span>创建新笔记</span>
               		</div>
               		<!--<c:if test="${proType==0||authorization==1 }">
	               		<div class="content-title create-note">
	               			<i class="iconfont icon-tianjia1 create-btn"></i><span>创建新笔记</span>
	               		</div>
               		</c:if>-->
               		
               		<!--主体内容-->
               		<div class="content text-left">
               			<!--创建新笔记-->
               			<div id="new-note" class="note-editor">
               				<div class="note-bar clearfix">
               					<div class="create-people pull-left">创建人:<span>${user.userName }</span></div>
               					<div class="pull-right">
               						<a class="save" data-toggle="tooltip" title="保存"><i class="iconfont icon-msnui-save-bold"></i></a>			
               					</div>
               				</div>
               				<div class="note-body">
               					<div id="new-editor" class="text"></div>
               				</div>
               			</div>
               			<!--笔记列表-->
               			<div class="note-list">
               				<c:forEach items="${project.investNoteList }" var="note">
	               				<div class="note-item">
	               					<div class="note-bar clearfix">
		               					<div class="create-people pull-left">创建人:<span>${note.user.userName }</span></div>
		               					<div class="create-time pull-left">创建时间:<span>${note.createTimeView }</span></div>
		               					<div class="change-time pull-left">修改时间:<span>${note.updateTimeView }</span></div>
		               					<div class="btn-row pull-right">
			               					<a class="edit" data-value="${note.id }" data-toggle="tooltip" title="编辑"><i class="iconfont icon-bianji1"></i></a>	
			               					<a class="del" data-value="${note.id }" data-toggle="tooltip" title="删除"><i class="iconfont icon-shanchu2"></i></a>
			               				</div>
               							<%-- <c:if test="${proType==0||authorization==1 }">
			               					<div class="btn-row pull-right">
			               						<a class="edit" data-value="${note.id }" data-toggle="tooltip" title="编辑"><i class="iconfont icon-bianji1"></i></a>	
			               						<a class="del" data-value="${note.id }" data-toggle="tooltip" title="删除"><i class="iconfont icon-shanchu2"></i></a>
			               					</div>
			               				</c:if> --%>
		               				</div>
		               				<div class="note-body">${note.content }</div>
	               				</div>
               				</c:forEach>
               		</div>
               		<!--编辑笔记-->
           			<div id="edit-note" class="note-editor" style="margin-top:20px;">
           				<div class="note-bar clearfix">
           					<div class="create-people pull-left">创建人:<span></span></div>
           					<div class="create-time pull-left">创建时间:<span></span></div>
           					<div class="change-time pull-left">修改时间:<span></span></div>
           					<div class="pull-right">
           						<a class="save" data-toggle="tooltip" title="保存"><i class="iconfont icon-msnui-save-bold"></i></a>			
           					</div>
           				</div>
           				<div class="note-body">
           					<div id="edit-editor"></div>
           				</div>
           			</div>
               	</div>
           </div>
        </div>
        <!--删除确认模态框-->
		<div class="modal fade" id="del-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<input type="hidden" value="" id="del_prpgrass"/>
			<div class="modal-dialog">
				<div class="modal-content text-center">
					<div class="modal-body">
						<div class="text-tip">是否确认删除该笔记？</div>
					</div>
					<div class="modal-footer text-center">
						<button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary confirm" data-dismiss="modal">确认</button>
					</div>
				</div>
			</div>
		</div>
       
       <input type="hidden" id="proId" value="${project.id }"/>
       <input type="hidden" id="userId" value="${user.id }"/>
       <input type="hidden" id="noteId" value="0"/>
       
        <script src="/resources/src/js/jquery-1.9.1.min.js"></script>
	    <script src="/resources/src/js/jquery.nicescroll.js"></script>
	    <script src="/resources/src/js/bootstrap.min.js"></script>
	    <script src="/resources/src/js/main.js"></script>
	    <script src="/resources/src/js/projects-common.js"></script>
	    
	    <!--百度UMeidtor-->
	    <script charset="utf-8" src="/resources/src/umeditor/third-party/template.min.js"></script>
	    <script charset="utf-8" src="/resources/src/umeditor/umeditor.config.js"></script>
	    <script charset="utf-8" src="/resources/src/umeditor/umeditor.min.js"></script>
	    <script src="/resources/src/umeditor/lang/zh-cn/zh-cn.js"></script>
	    <!--百度UMeidtor-->

	    <script>
	    	$(function(){ 

	    		/*-----------------------------------
	    		* 富文本编辑器
	    		-----------------------------------*/
	    		
	    		//配置图标
	    		var UMopt={toolbar: [
			        'undo', //撤销
			        'redo', //重做
			        'bold', //加粗
			        'italic', //斜体
			        'underline', //下划线
			        'strikethrough', //删除线
			        'superscript', //上标
			        'subscript', //下标
			        'forecolor', //字体颜色
			        'backcolor', //背景色
			        'removeformat', //清除格式
			        'insertorderedlist', //有序列表
			        'insertunorderedlist', //无序列表
			        'selectall', //全选
			        'cleardoc', //清空文档
			        'paragraph', //段落格式
			        'fontfamily', //字体
			        'fontsize', //字号
			        'justifyleft', //居左对齐
			        'justifyright', //居右对齐
			        'justifycenter', //居中对齐
			        'link', //超链接
			        'unlink', //取消链接
			        'emotion', //表情
			        'image',  //图片上传
			        'horizontal', //分隔线
			        'print', //打印
			        'preview', //预览
			        'drafts', // 从草稿箱加载
			        'formula', //数学公式
			        'fullscreen', //全屏   
			    ]};
				
	    		//创建笔记富文本编辑器
	    		var newNote = UM.getEditor('new-editor',UMopt);
					newNote.setWidth('98%');
				
				//编辑笔记富文本编辑器
				var editNote = UM.getEditor('edit-editor',UMopt);
					editNote.setWidth('98%');

				//编辑器样式
				$(".edui-body-container").css({
					width:'100%',
					height:'200px',
					minHeight:'auto'
				});
	    		/*----------------------------------------
	    		 * 创建新笔记
	    		 -----------------------------------------*/
	    		//1.创建新笔记
	    		$(".create-note").click(function(){
	    			var proType=$("#proType").val().trim(),
	    				authorization=$("#authorization").val().trim();
	    			//关闭编辑笔记编辑器
	    			if($("#edit-note").css("display")=="block"){
	    				$("#edit-note").slideUp();
	    			};
	    			//如果是跟进人显示创建笔记富文本编辑器
	    			//不是项目跟进人时，显示提示信息
	    			$("#new-note").slideToggle();
	    			/* if(proType=="0" || authorization=="1" ){
	    				$("#new-note").slideToggle();
	    			}else{
	    				$("#no-permission-modal").modal("show");
	    			} */
	    		});
	    		
	    		//2.保存新建笔记
	    		$("#new-note .save").click(function(){
	    			$("#new-note").slideUp();
	    			//获取编辑器的内容
	    			var txt=newNote.getContent();
	    			if(!(txt=="" || txt==null)){
		    			$.post(
		    					'/projects/saveOrUpdateNote',
		    					{
		    						'content' : txt,
		    						'proId' : $('#proId').val(),
		    						'userId' : $('#userId').val()
		    					},
		    					function(data){
									if(data.status == true){
					    				var name,time,html,$item;
					    				//创建人、创建时间、笔记内容等数据
						    			name=$("#new-note .create-people span").text();
						    			time=$("#new-note .create-time span").text();
						    			//创建新的笔记节点
						    			$item=$("<div class='note-item'></div>")
						    			html ="<div class='note-bar clearfix'>"
						               		 + "<div class='create-people pull-left'>创建人:"
						               		 + "<span>"
						               		 + name
						               		 + "</span>"
						               		 + "</div>"
						               		 + "<div class='create-time pull-left'>创建时间:"
						               		 + "<span>"
						               		 + data.data.create
						               		 + "</span>"
						               		 + "</div>"
						               		 + "<div class='change-time pull-left'>修改时间:"
						               		 + "<span>"
						               		 + data.data.update
						               		 + "</span>"
						               		 + "</div>"
						               		 + "<div class='btn-row pull-right'>"
						               		 + "<a class='edit' data-value='"+data.data.id+"' data-toggle='tooltip' title='编辑'>"
						               		 + "<i class='iconfont icon-bianji1'></i>"
						               		 + "</a>"
						               		 + "<a class='del' data-value='"+data.data.id+"' data-toggle='tooltip' title='删除'>"
						               		 + "<i class='iconfont icon-shanchu2'></i>"
						               		 + "</a>"
						               		 + "</div>"
						               		 + "</div>"
						               		 + "<div class='note-body'>"
						               		 + txt
						               		 + "</div>";
						               	//将新笔记插入到笔记列表中
						               	$item.html(html).appendTo($(".note-list"));
						               	newNote.setContent("");
									}else{
										
									}
		    					},'json'
		    			);
	    			}
	    		});
	    		
	    		/*----------------------------------
	    		 * 删除和编辑笔记
	    		 ---------------------------------*/
	    		/**删除笔记**/
	    		//点击删除按钮时，弹出确认框
	    		$(".note-list").on("click",".del",function(){
	    			$("#del-modal").modal("show");
	    			var $item;
    				$item=$(this).parents(".note-item");
	    			$item.addClass("on").siblings().removeClass("on");
	    		});
	    		
	    		//用户确认删除笔记
	    		$("#del-modal .confirm").click(function(){
	    			var id=$(".note-list .on .del").data("value");
	    			console.log(id);
	    			$.get(
    					'/projects/deleteNote/'+id,
    					function(data){
    						if(data.status == true){
				    			$(".note-list .on").remove();	
    						}
    					},'json'
	    			);
	    		});
	    		
	    		/**编辑笔记**/
	    		$(".note-list").on("click",".edit",function(){
	    			$('#noteId').val($(this).data('value'));
	    			//关闭创建笔记编辑器
	    			if($("#new-note").css("display")=="block"){
	    				$("#new-note").slideUp();
	    			}
	    			var $item=$(this).parents(".note-item");
	    			$item.addClass("on").siblings().removeClass("on");
	    			//获取创建人、修改时间、修改内容等数据
	    			var name,time,oldHtml;
	    			name=$(".note-list .on .create-people span").text();
	    			time=$(".note-list .on .create-time span").text();
	    			oldHtml=$item.find(".note-body").html();
	    			//设置新建笔记的创建人、创建时间、修改时间、原内容等数据
	    			$("#edit-note .create-people span").text(name);
	    			$("#edit-note .create-time span").text(time);
	    			$("#edit-note .change-time span").text(timeToString());
					editNote.setContent(oldHtml);
					//显示富文本编辑器
					$("#edit-note").slideDown();
					//滚动到到编辑器位置
					
					var scroll_offset = $("#edit-note").offset();
					$("body,html").animate({
						scrollTop:scroll_offset.top+210, 
					},500);
	
	    		});
	    		
	    		/**保存编辑**/
	    		$("#edit-note .save").click(function(){
	    			var time,html;
	    			time=$(this).parents(".note-bar").find(".change-time span").text();
	    			html=editNote.getContent();
	    			$.post(
	    					'/projects/saveOrUpdateNote',
	    					{
	    						'content' : html,
	    						'proId' : $('#proId').val(),
	    						'userId' : $('#userId').val(),
	    						'id' : $('#noteId').val()
	    					},
	    					function(data){
								if(data.status == true){
					    			$(".note-list .on .change-time span").text(data.data.update);
					    			$(".note-list .on .note-body").html(html);
								}else{
									
								}
	    					},'json'
	    			);
	    			//保存成功后，更改界面中笔记的显示
	    			$("#edit-note").slideUp();
	    			//滚动到更改的笔记位置
	    			
					var scroll_offset = $(".on").offset();
					$("body,html").animate({
						scrollTop:scroll_offset.top, 
					},500);
	    		});
	    		
	    		//当前日期时间转字符串函数
	    		function timeToString(){
	    			var opts, d=new Date();
	    			opts={
	    				'year':d.getFullYear(),
		    			'month':d.getMonth()+1,
		    			'day':d.getDate(),
		    			'hours':d.getHours(),
		    			'minus':d.getMinutes(),
		    			'seconds':d.getSeconds()
	    			}
		    		
		    		//对opts格式化处理
	    			for(var key in opts){
	    				opts[key]=opts[key]>=10? opts[key] : "0"+opts[key];	
	    			}
		    		//转字符串
		    		return opts.year+"年"+opts.month+"月"+opts.day+"日"+" "+opts.hours+":"+opts.minus+":"+opts.seconds;
	    		};
	    	});
	    	
	    </script>
	</body>
</html>